<template>

<view>
<scroll-view class="scroll">
    <!-- <van-empty></van-empty> -->
    <view style="display:flex;flex-direction:row">
      <uni-icons style="margin-top:40rpx" color="#ff6781" type="home-filled" size="30"></uni-icons>
      <uni-card 
      :is-shadow="true"
      style="width:85%" 
      extra="多选" 
      title="请描述您就医的主要原因">
	        <uni-data-checkbox 
          mode="list" icon="right" 
          multiple
          v-model="value" 
          :localdata="range"
          selectedColor="#ff6781" 
          selectedTextColor="#ff6781"
          @change="multiChange">
          </uni-data-checkbox>
          <view class="que-button">
            <van-button 
              @click="commitQue"
              round color="#f28395"
              :disabled="isDisabled">
              确定  
            </van-button>
          </view>
      </uni-card>
    </view>
    <view v-if="showAnswer" class="answer">

      <uni-card
        :is-shadow="true"
       :border="false">
          <text  style="color:#fff;
          font-size:37rpx;
         ">{{answer}}</text>
      </uni-card>

      <uni-icons style="margin-top:40rpx" color="#6495ED" type="color-filled" size="30"></uni-icons>
    </view>
</scroll-view>

    <van-tabbar 
  :active=tabActive 
  activeColor="#ff6781"
  >
  <van-tabbar-item icon="home-o" data-info="index" @click="tabClickHandler($event)">门诊</van-tabbar-item>
  <van-tabbar-item icon="friends-o" @click="tabClickHandler($event)" data-info="person" >个人</van-tabbar-item>
  <van-tabbar-item icon="setting-o" >反馈</van-tabbar-item>
  </van-tabbar>
  </view>
</template>

<script>
export default{
	data(){
		return{
			tabActive:2,
      value: 0,
			range: [
        {"value": 0,"text": "胃部疼痛"},
        {"value": 1,"text": "腹部疼痛"},
        {"value": 2,"text": "消化不良"},
        {"value": 3,"text": "其他"}],
      showAnswer:false,
      isDisabled:true,
      answer:'默认值'
		}
	},
  onShow(){
 
  },
  methods:{
      multiChange(e){
            let current = e.detail.value
            if(current.length == 0) {
              this.isDisabled = true
            } else {
              this.isDisabled = false
            }
      },
      commitQue(){
        // this.answer = this.value
        this.showAnswer = !this.showAnswer;
        uni.setStorage({
          key:'one',
          value:'',
          success:function(){
          }
        })
      },
      tabClickHandler(event){
      // console.log(event)
      let page = event.currentTarget.dataset.info 
      let url = `/pages/${page}/${page}`
      uni.switchTab({
	      url: url
     });
    }
  }
}
</script>

<style scoped>
.answer{
    display:flex;
    flex-direction:row;
    float: right;
}
.van-button--default{
    width:300rpx;
}
.que-button :deep(.van-button){
  height: 80rpx;
  box-shadow: 3px 3px 3px #f5d3d9;
}
.answer :deep(.uni-card) {
  background-color: #ff6781;
}

.scroll :deep(.uni-card){
  border-radius:10%;
}
</style>
